<template>

  <div>
    <div class="card" style="margin-bottom: 10px;">
      <el-input v-model="data.buyerName" :prefix-icon="Search" style="width: 300px; margin-right: 10px"
        placeholder="请输入买家名字"></el-input>
      <el-button type="primary" style="margin-left: 10px;" @click="load">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
    <div class="card">
      <div style="margin-bottom: 10px;">
        <el-table :data="data.tableData">
          <el-table-column v-if="false" label="订单ID" prop="orderId" width="70"></el-table-column>
          <el-table-column label="买家名字" prop="buyerName"></el-table-column>
          <el-table-column label="买家电话" prop="buyerPhone"></el-table-column>
          <el-table-column label="微信openid" prop="buyerOpenid"></el-table-column>
          <el-table-column label="订单总金额" prop="orderAmount"></el-table-column>
          <el-table-column label="买家地址" prop="buyerAddress"></el-table-column>
          <el-table-column label="订单状态" prop="orderStatus">
            <template #default="scope">
              <el-tag v-if="scope.row.orderStatus == 0" type="success" effect="dark">新订单</el-tag>
              <el-tag v-if="scope.row.orderStatus == 1" type="danger" effect="dark">已完成</el-tag>
              <el-tag v-if="scope.row.orderStatus == 2" type="warning" effect="dark">已取消</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="支付状态" prop="payStatus">
            <template #default="scope">
              <el-tag v-if="scope.row.payStatus == 0" type="warning" effect="dark">待支付</el-tag>
              <el-tag v-if="scope.row.payStatus == 1" type="success" effect="dark">已支付</el-tag>
              <el-tag v-if="scope.row.payStatus == 2" type="danger" effect="dark">支付关闭</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="修改时间" prop="updateTime"></el-table-column>
          <el-table-column label="操作" align="center" width="160">
            <template #default="scope">
              <el-button type="primary" @click="showorderDetails(scope.row.orderId)" size="small">订单详情</el-button>
              <el-button type="danger" v-if="scope.row.payStatus == 0" @click="cancelOrder(scope.row.orderId, scope.row.buyerOpenid)"
                size="small">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="card">
        <el-pagination background layout="prev, pager,next" @current-change="handelCurrentChange"
          v-model:current-page="data.pageNum" v-model:page-size="data.pageSize" :total="data.total" />
      </div>

      <!--模态框-->
      <el-dialog title="订单详情信息" width="80%" v-model="data.formVisible" :close-on-click-modal="false" destroy-on-close>
        <div style="margin-bottom: 10px;">
          <el-table :data="data.tableData1">
            <el-table-column label="商品名称" prop="productName"></el-table-column>
            <el-table-column label="当前价格" prop="productPrice"></el-table-column>
            <el-table-column label="数量" prop="productQuantity"></el-table-column>
            <el-table-column label="图片" prop="productIcon">
              <template #default="scope">
                <el-image v-if="scope.row.productIcon" :src="scope.row.productIcon"
                  :preview-src-list="[scope.row.productIcon]"
                  style="width: 40px;height: 40px;border-radius: 4px;"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="订单总金额" prop="productPrice"></el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="修改时间" prop="updateTime"></el-table-column>
          </el-table>
        </div>
      </el-dialog>

    </div>
  </div>

  <audio id="notice" >
    <source src="@/assets/mp3/song.mp3" type="audio/mpeg" />
  </audio>

</template>


<script setup>
import { reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import request from "@/utils/request.js";
import { ElMessage } from "element-plus";

const data = reactive({
  buyerName: '',
  tableData: [],
  tableData1: [],
  pageNum: 1, //当前页码
  pageSize: 5, //每页个数
  total: 0,
  formVisible: false //新增框不显示
})

//请求数据
const load = () => {
  request.get("/seller/order-master/selectPage", {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      buyerName: data.buyerName
    }
  }).then(res => {
    //console.log("分页数据:" + JSON.stringify(res));
    data.tableData = res.data?.list || [];
    data.total = res.data?.total || 0;
  }).catch(err => {
    console.error("请求失败:", err); // 处理请求错误
  })
}

//翻页
const handelCurrentChange = (pageNum) => {
  // 当翻页的时候重新加载数据即可
  load()
}

//重置
const reset = () => {
  data.buyerName = ''
  load()
}

//点击编辑按钮，弹出模态框
const handleEdit = (row) => {
  data.form = JSON.parse(JSON.stringify(row))  // 拷贝行数据到表单对象，数据回显
  data.formVisible = true;
}

// 调用方法获取后台数据
load();

//点击编辑
const showorderDetails = (orderId) => {
  request.get("/seller/order-detail/selectPage", {
    params: {
      orderId: orderId
    }
  }).then(res => {
    console.log("订单详情数据:" + JSON.stringify(res.data));
    data.tableData1 = res.data?.list || [];
    data.formVisible = true;
  })

}

//删除
const cancelOrder = (orderId, buyerOpenid) => {
  ElMessageBox.confirm('确定取消该用户的订单吗?', '确定取消', { type: 'warning' }).then(res => {
    request.post('/seller/order-master/cancel/', {
      // params: {
      orderId: orderId,
      buyerOpenid: buyerOpenid
      // }
    }).then(res => {
      if (res.code === '200') {
        load()    // 重新获取数据
        ElMessage.success(res.msg || "操作成功");
      } else {
        ElMessage.error(res.msg || "操作失败");
      }
    })
  }).catch(res => {
  })
}

</script>

<script>
import {ElMessage} from "element-plus";

var websocket = null;
if ('WebSocket' in window) {
  websocket = new WebSocket('ws://127.0.0.1:8080/sell/webSocket');
} else {
  alert('该浏览器不支持websocket!');
}

websocket.onopen = function (event) {
  console.log('建立连接');
}

websocket.onclose = function (event) {
  console.log('连接关闭');
}

websocket.onmessage = function (event) {
  ElMessage.success("您有新的订单:" + event.data);
  console.log('收到消息:' + event.data);
  //弹窗提醒, 播放音乐
  //$('#myModal').modal('show');
  document.getElementById('notice').play();
}

websocket.onerror = function () {
  alert('websocket通信发生错误！');
}

window.onbefore2unload = function () {
  websocket.close();
}

document.body.addEventListener('mousedown', function () {
  var video = document.getElementById('notice');
  video.muted = false;
}, true);

</script>